import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

//引入页面组件
import Home from '../views/Home.vue'
import About from '../views/about.vue'
const AboutView = () => import('../views/AboutView.vue') //懒加载方式
const Profile = () => import('../views/profile.vue')

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home,
    meta: {
      title: '主页'
    }
  },
  {
    path: '/profile/:id',
    component: Profile,
    meta: {
      title: '档案'
    }
  },
  // {
  //   path: '/about',
  //   name: 'about',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: function () {
  //     return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  //   }
  // }
  {
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    },
    children: [
      {
        path: 'view',
        component: AboutView
      },
      // {
      //   path:'/',
      //   redirect:'AboutView'
      // }
    ]
  }
]

const router = new VueRouter({
  routes,
  mode: "history"
})

router.beforeEach((to,from,next)=>{
  window.document.title = to.meta.title
  next()
})

export default router
